<template>
	<view :style="{paddingTop:`${$safeh+12}px `}">
		<!-- #ifndef H5 -->
		<u-sticky bgColor="#fff" offset-top="30">
			<view class="u-search">
				<u-search placeholder="请输入关键字" @search='mysearch' @custom='mysearch' v-model="keyword"></u-search>
			</view>
		</u-sticky>
		<u-tabs :scrollable='false' :list="list1"></u-tabs>
		<!-- #endif -->
			<view class="contentbox">
				<scroll-view scroll-x="true" :scroll-anchoring='true' scroll-with-animation :scroll-left="bossscrollleft" @scroll="bossscroll">
					<view class="contentbox_item" >
						
						<view class="firsttext">学校</view>
						<view class='sametext'>科目</view>
						<view class='sametext'>考生数</view>
						<view class='sametext'>与考数</view>
						<view class='sametext'>最高分</view>
						<view class='sametext'>最低分</view>
						<view class='sametext'>平均分</view>
						<view class='sametext'>名次</view>
						<view class='sametext' style="width: 60rpx;" >平均分贡献</view>
						<view class='sametext'>名次</view>
						<view class='sametext'>优秀数</view>
						<view class='sametext'>优秀率</view>
						<view class='sametext'>名次</view>
						<view class='sametext' style="width: 60rpx;">优秀率贡献</view>
						<view class='sametext'>及格数</view>
						<view class='sametext'>及格率</view>
						<view class='sametext'>名次</view>
						<view class='sametext'style="width: 60rpx;">及格率贡献</view>
						<view class="sametext">名次</view>
						<view class='sametext'>低分数</view>
						<view class='sametext'>低分率</view>
						
					</view>
				</scroll-view>
				<scroll-view scroll-y="true" class="scrool" @scrolltolower="scrolltolower">
				<view class="" v-for="(i,index) in 23">
					<scroll-view :scroll-into-view='zzz' :scroll-anchoring='true' scroll-x="true" scroll-with-animation :scroll-left="scrolllefts" @scroll="binscroll" >
						<view class="contentbox_item">
							<text class="firsttext hidden-122">永安市第一附属中学</text>
							<text class='sametext'>语文</text>
							<text class='sametext'>55</text>
							<text class='sametext'>66</text>
							<text class='sametext'>111.3</text>
							<text class='sametext'>3.3</text>
							<text class='sametext'>22.33</text>
							<text class='sametext'>33</text>
							<text class='sametext' style="width: 60rpx;">22</text>
							<text class='sametext'>33.33</text>
							<text class='sametext'>22</text>
							<text class='sametext'>33</text>
							<text class='sametext'>22.33</text>
							<text class='sametext' style="width: 60rpx;">22</text>
							<text class='sametext'>3</text>
							<text class='sametext'>11.1</text>
							<text class='sametext'>22</text>
							<text class='sametext' style="width: 60rpx;">1.33</text>
							<text class='sametext'>33</text>
							<text class='sametext'>2.33</text>
							<text class='sametext'>22</text>
						</view>
					</scroll-view>
				</view>
				</scroll-view>
			</view>
			
	</view>
</template>




<script>
	export default {
		data() {
			return {
				keyword: '',
				stardistance: '',
				zzz: '',
				enddistance: '',
				bossscrollleft: 0,
				scrolllefts: 0,
				list1: [{
					name: '成绩查询（老师）',
				}, {
					name: '成绩查询（学校）',
				}, ]
			}
		},
		onLoad() {

		},
		methods: {
			scrolltolower() {
				this.$toast('触底啦~')
			},
			bossscroll(e) {
				this.scrolllefts = e.detail.scrollLeft
			},
			binscroll(e) {
				this.bossscrollleft = e.detail.scrollLeft
				
			},
			mysearch(){
				if(this.keyword){
					this.$toast(this.keyword)
					this.keyword = ''
				}else{
					this.$toast('请输入关键字~')
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@mixin flex {
		display: flex;
		align-items: center;
	}

	.u-search {
		width: 686rpx;
		margin: 40rpx auto 0rpx ;
	}

	.scrool {
		height: calc(100vh - 180px);
		width: 686rpx;
		margin: 0rpx auto 320px;
		box-sizing: border-box;

	}

	.contentbox {
		width: 686rpx;
		font-size: 13px;
		margin: 0rpx auto 320px;
		white-space: nowrap;
		.contentbox_item {
			@include flex();
			.firsttext {
				text-align: center;
				width: 122rpx;
				flex-shrink: 0 ;
				padding: 10rpx 10rpx;
				border: 1rpx solid #999;
			}
			
			.sametext {
				text-align: center;
				width: 42rpx;
				flex-shrink: 0 ;	
				padding: 10rpx 0rpx;
				border-top: 1rpx solid #999;
				border-bottom: 1rpx solid #999;
				border-right: 1rpx solid #999;
			}
		}
	}

	.test{
		border: 1rpx solid #888;
		width: 211rpx;
	}


</style>